import React, { useState,} from 'react';
import {
  Form,
  Table,
  Input,
  Button,
  Select, 
  Divider,
  Breadcrumb, 
} from 'antd';
import CreateForm from './component/CreateForm'
import styles from './style.less'

const columns  = [
  {
    title: '选择',
    dataIndex: '',
  },
  {
    title: '教师ID',
    dataIndex: 'id',
  },
  {
    title: '姓名',
    dataIndex: 'name',
  },
  {
    title: '工号',
    dataIndex: 'jobNumber', 
  },
  {
    title: '权限范围',
    dataIndex: 'jobName', 
  },
  {
    title: '所属院（系）',
    dataIndex: 'facultyName', 
  },
  {
    title: '手机号',
    dataIndex: 'mobile',
  },
  {
    title: '邮箱',
    dataIndex: 'email',
  },
  {
    title: '状态',
    dataIndex: 'stateName', 
  },
  {
    title: '最后登录时间',
    dataIndex: 'loginTime',
    sorter: true,
    valueType: 'dateTime',
    hideInForm: true,
    renderFormItem: (item, { defaultRender, ...rest }, form) => {
      const status = form.getFieldValue('status');
      if (`${status}` === '0') {
        return false;
      }
      if (`${status}` === '3') {
        return <Input {...rest} placeholder="请输入异常原因！" />;
      }
      return defaultRender(item);
    },
  },
  {
    title: '操作',
    dataIndex: 'option',
    valueType: 'option',
    render: (_, record) => (
      <>
        <a
          onClick={() => {
            handleUpdateModalVisible(true);
            setStepFormValues(record);
          }}
        >
          编辑
        </a>
        <Divider type="vertical" />
        <a href="">删除</a>
      </>
    ),
  },
];



const Teacher=(props)=> {
const [dataSource, setDataSource] = useState([])
const [createModalVisible, setCreateModalVisible] = useState<boolean>(false)

const handleAddStudent =()=>{
  setCreateModalVisible(true)
}
const handleHidden =()=>{
  setCreateModalVisible(false)
}

  return (
    <>
      <div>
        <Breadcrumb >
          <Breadcrumb.Item>首页</Breadcrumb.Item>
          <Breadcrumb.Item>基础信息</Breadcrumb.Item>
          <Breadcrumb.Item>教师信息</Breadcrumb.Item>
        </Breadcrumb> 
        <Form
          // form={form}
          layout="inline"
          size="middle" 
          name="basic"
          className={styles.search}
          initialValues={{
            school: '',
            profession: '',
            grade: '',
            class: '',
            degree: '',
            studentStatus: '',
            accountStatus: '',
          }}
          // onFinish={handleSubmit}
        >
          <Form.Item label="学院" name="school">
            <Select>
              <Select.Option value="">全部</Select.Option>
            </Select>
          </Form.Item> 
          <Form.Item label="状态" name="studentStatus">
            <Select>
              <Select.Option value="">全部</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item label="权限" name="accountStatus">
            <Select>
              <Select.Option value="">全部</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item name="studentName">
            <Input placeholder="请输入教师姓名或工号" />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit">
              搜索
            </Button>
          </Form.Item>
        </Form>
        <div className={styles.button}> 
            <Button onClick={handleAddStudent}>
              新增教师
            </Button>
            {/* <Button>批量导入</Button> */}
        </div>
        <Table 
          rowKey="id"
          columns={columns}
          dataSource={dataSource} 
        />
        <CreateForm
          // type={type}
          // willEditStudent={willEditStudent}
          modalVisible={createModalVisible}
          // refreshList={refreshList}
          onCancel={handleHidden}
        />
      </div>
    </>
  );
}

export default Teacher;